<script setup>
import { delFeedbackApi, getFeedbackListApi } from '@/api/feedback.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore.js'

const router = useRouter()
const feedbackList = ref([])
const getFeedbackList = async () => {
  const res = await getFeedbackListApi()
  feedbackList.value = res.data
}
getFeedbackList()
// onMounted(() => getFeedbackList())
const showFeedback = () => {
  router.back()
}

const handleDelCart = (row) => {
  console.log(row)
  ElMessageBox.confirm(
    '是否确认将改记录删除',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }
  )
    .then(async  () => {
      await delFeedbackApi(row.uid,row.fid)
      ElMessage({
        type: 'success',
        message: '已删除'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消'
      })
    })
}
const userStore = useUserStore()
</script>

<template>
  <div class="feedback">
    <div v-if="userStore.user" class="feedback-box">
      <div class="feed-item">
        <el-button :color="'#39c5bb'" :icon="'Back'" bg plain style="align-self: flex-start;margin-bottom: 20px"
                   @click="showFeedback">
          {{ '我的反馈' }}
        </el-button>
        <el-table :data="feedbackList" stripe style="height: 500px;width: 100%">
          <el-table-column label="反馈内容" prop="content"></el-table-column>
          <el-table-column label="反馈时间" prop="createtime"></el-table-column>
          <el-table-column label="状态" prop="status">
            <template #default="scope">
              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{ scope.row.status === 1 ? '已处理' : '待处理'
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button :icon="'Delete'" plain round type="danger" @click="handleDelCart(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-else class="cart-box"><el-empty :description="'请先登录哟~'"></el-empty></div>
  </div>

</template>

<style lang="scss" scoped>
.feed-item {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 10px;
}

.feedback {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 50px;

  &-box {
    width: 70%;
    background-color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
}
</style>